<!--
 * @Description: 图片预览组件
-->
<template>
  <div class="previewImg">
    <div class="header">
      <Navbar :title="previewTitle" @leftclick="goback"> </Navbar>
      <div class="checkBox">
        <van-checkbox checked-color="#f68484" v-model="checked">
          <template #icon="props">
            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
          </template>
        </van-checkbox>
      </div>
    </div>
    <div class="content">
      <div class="wrap">
        <van-image-preview
          :images="curImgList"
          @change="handleChange"
          @close="onclose"
          :showIndex="false"
          ref="preview"
          v-model:show="show"
          :closeOnPopstate="false"
          :startPosition="startPosition"
        >
        </van-image-preview>
      </div>
      <div class="footer">
        <van-button
          type="primary"
          class="footerBtn hoverP"
          :class="{ active: checkedList.length, disabled: !checked.length }"
          @click="del"
          >{{ btnText }}</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/Navbar"
import { reactive, ref, toRefs, computed, onMounted } from "vue"
import { useRouter } from "vue-router"
const activeIcon = require("@/assets/selected.svg")
const inactiveIcon = require("@/assets/un-select.svg")

export default {
  name: "PreviewImg",
  props: {
    imgSrc: {
      type: Array,
      default: () => [],
    },
    checkedList: {
      type: Array,
      default: () => [],
    },
    defaultIndex: {
      type: Number,
      default: 0,
    },
    showPreviewImg: {
      type: Boolean,
      default: false,
    },
    previewTitle: {
      type: String,
      default: "1/1",
    },
    btnText: {
      type: String,
      default: "删除",
    },
    previewItem: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    Navbar,
  },
  setup(props, context) {
    const { imgSrc, checkedList, previewItem } = props
    const { attr, slot, emit } = context

    const preview = ref(null)
    const startPosition = ref(-1)
    const originIndex = ref(0)
    const oldIndex = ref(1)
    const isFirst = ref(false)

    const state = reactive({
      curImgList: [],
    })

    const show = computed({
      get() {
        return previewItem
      },
      set(value) {},
    })

    const checked = computed({
      get() {
        let cur = props.previewItem.path
        return props.checkedList.includes(cur)
      },
      set(value) {
        // 在value值发生改变时可以触发某些操作，相当于监听属性变化
      },
    })

    function handleChange(index) {
      //向父组件传递轮播图索引，解决加载图片的问题
      if (imgSrc.length > 3) {
        if (isFirst.value) {
          isFirst.value = false
          return
        }
        let isNext = 1 // 当前index和上一次的index对比计算是往哪边滑动了中间态  0 1 2  0小于 1等于 2大于
        if (
          (index == 0 && oldIndex.value == 2) ||
          (index == 1 && oldIndex.value == 0) ||
          (index == 2 && oldIndex.value == 1)
        ) {
          isNext = 2
          originIndex = originIndex.value + 1 > imgSrc.length - 1 ? 0 : originIndex.value + 1
        } else if (
          (index == 0 && oldIndex.value == 1) ||
          (index == 1 && oldIndex.value == 2) ||
          (index == 2 && oldIndex.value == 0)
        ) {
          isNext = 0
          originIndex.value = originIndex.value - 1 < 0 ? imgSrc.length - 1 : originIndex.value - 1
        }
        getImgList(isNext, index, originIndex.value)
        oldIndex.value = index
        emit("prewHandleChange", imgSrc[originIndex.value], originIndex.value)
      } else {
        emit("prewHandleChange", imgSrc[index], index)
      }
    }
    function onclose() {
      emit("hidePreviewImg")
    }
    function goback() {
      emit("hidePreviewImg")
    }
    function del() {
      if (!checkedList.length) {
        return false
      }
      Dialog.confirm({
        title: "确定要删除所选文件？",
        message: `删除的文件可通过回收站还原`,
        className: "scanDialog",
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then(() => {
        emit("deleFiles")
        emit("hidePreviewImg")
      })
    }

    function getNext() {
      return state.originIndex + 1 > props.imgSrc.length - 1 ? 0 : state.originIndex + 1
    }
    function getPrev() {
      return state.originIndex - 1 < 0 ? props.imgSrc.length - 1 : state.originIndex - 1
    }
    // 获取三个 【上一个，当前，下一个】
    function getImgList(isNext, index) {
      if (props.imgSrc.length <= 3) {
        state.curImgList = props.imgSrc
        return
      }
      let prev = 0
      let next = 0
      let center = 0
      if ([0, 2].includes(isNext)) {
        // 下一个
        if (index === 0) {
          prev = state.originIndex
          center = getNext()
          next = getPrev()
        } else if (index === 1) {
          prev = getPrev()
          center = state.originIndex
          next = getNext()
        } else {
          prev = getNext()
          center = getPrev()
          next = state.originIndex
        }
      } else {
        prev = getPrev()
        center = state.originIndex
        next = getNext()
      }
      state.curImgList = [props.imgSrc[prev], props.imgSrc[center], props.imgSrc[next]]
    }

    onMounted(() => {
      if (props.imgSrc.length <= 3) {
        state.curImgList = props.imgSrc
        state.startPosition = props.defaultIndex
        return
      }
      state.originIndex = props.defaultIndex
      state.startPosition = 1
      state.isFirst = true
      getImgList()
      preview.value.swipeTo(1)
    })

    return {
      preview,
      startPosition,
      originIndex,
      oldIndex,
      isFirst,
      ...toRefs(state),
      show,
      checked,
      handleChange,
      onclose,
      goback,
      del,
      getNext,
      getPrev,
      getImgList,
    }
  },
}
</script>

<style lang="less" scoped>
.previewImg {
  width: 100%;
  height: 100vh;
  position: absolute;
  background: #fafafa;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  .header {
    height: 57px;
    position: relative;
    z-index: 2;
    .checkBox {
      width: 16px;
      height: 16px;
      position: absolute;
      right: 20px;
      top: 28px;
      z-index: 999;
      .img-icon {
        width: 16px;
        height: 16px;
      }
    }
  }
  .content {
    flex: 1;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    background: #fafafa;
    .wrap {
      flex: 1;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.03);
      :deep(.van-overlay) {
        z-index: 0 !important;
        background-color: #fafafa !important;
      }
      :deep(.van-image-preview) {
        z-index: 0 !important;
      }
      :deep(.van-image-preview__image) {
        width: 100%;
        height: 100%;
      }
      :deep(.img-bg) {
        width: 0;
        height: 0;
      }
      :deep(.van-image-preview__index) {
        width: 100%;
        height: 59px;
        top: 0px;
        text-shadow: none;
      }
      :deep(.van-swipe__track) {
        height: calc(100vh - 111px - 81px) !important;
        position: relative;
        top: 60px;
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 92%;
          height: 92%;
        }
      }
      .teshu {
        border-left: 1px solid #dcdcdc;
      }
      :deep(.van-swipe-item) {
        height: 100%;
        width: 100%;
      }
      :deep(.van-grid-item) {
        z-index: 50;
      }
    }
    .footer {
      width: 100%;
      height: 88px;
      position: relative;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      padding: 10px 54px 0 54px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
      box-shadow: 0px 0px 32px 0px rgba(218, 41, 28, 0.2);
      border-radius: 32px 32px 0px 0px;
      .footerBtn {
        width: 267px;
        height: 38px;
        border-radius: 12px;
        font-size: 13px;
        background: #d0d0ce;
        color: #303133;
        text-shadow: 0px 0px 32px rgba(218, 41, 28, 0.2);
        &.active {
          background: linear-gradient(135deg, #ef8881 0%, #da291c 100%);
          color: #ffffff;
          text-shadow: 0px 0px 32px rgba(218, 41, 28, 0.2);
        }
      }
    }
  }
}
</style>
